<script setup lang="ts">
import { FwbToast } from 'flowbite-vue';

const { toast, topInsetGetter } = useToast();
</script>

<template>
    <ClientOnly>
        <TransitionGroup name="slide" appear>
            <fwb-toast
                class="absolute inset-x-1/2 translate-x-to-center translate-y-to-center transition-all duration-500 shadow-normal"
                v-for="item in toast" :key="item.time" :type="item.type" v-show="item.show" closable
                :style="{ top: `${topInsetGetter(item)}px` }" :onClose="() => item.show = false">
                {{ item.msg }}
            </fwb-toast>
        </TransitionGroup>
    </ClientOnly>
</template>

<style>
.slide-enter-from,
.slide-leave-to {
    translate: 0 -100%;
    opacity: 0;
}
</style>